<script setup lang='tsx' name='AddFriend'>
import type { FriendShipInfo, Pagination, QueryFriendFrom } from '@/types/views/friend'
import { userListApi, addFriendApi } from '@/api'
import { ElMessage, type FormInstance, type TableInstance } from 'element-plus';
import { Back } from '@element-plus/icons-vue'


function useAddFriendHook() {
    const formRef = ref<FormInstance>()
    const form = reactive<Pagination & QueryFriendFrom>({
        page: 1,
        pageSize: 10,
        nickName: void 0,
        username: void 0,
    })
    const tableRef = ref<TableInstance>()
    const total = ref(0)
    const table = ref<FriendShipInfo[]>([])
    let timer: number | null = null
    const loading = ref(false)
    function getUserList() {
        if (timer) clearTimeout(timer)
        loading.value = true
        timer = setTimeout(async () => {
            const { data } = await userListApi(form)
            table.value = data.rows
            total.value = data.total
            loading.value = false
            clearTimeout(timer as number)
        }, 200) as unknown as number
    }

    function reset() {
        formRef.value?.resetFields()
        getUserList()
    }
    return { form, tableRef, total, table, getUserList, formRef, reset, loading }
}
const { form, tableRef, total, table, getUserList, formRef, reset, loading } = useAddFriendHook()
getUserList()

function useAddHook() {
    const addForm = reactive<{ friendId: number, reason: string }>({
        friendId: 0,
        reason: ''
    })
    const addVisible = ref(false)
    function handleAdd(row: FriendShipInfo) {
        addVisible.value = true
        addForm.friendId = row.id
        console.log(row);
    }
    function handleClose() {
        addForm.friendId = 0
        addForm.reason = ''
    }
    async function submit() {
        await addFriendApi(addForm)
        ElMessage.success('发送成功')
        addVisible.value = false
    }
    return { addVisible, handleAdd, handleClose, submit, addForm }
}
const { addVisible, handleAdd, handleClose, submit, addForm } = useAddHook()
</script>

<template>
    <div class='friend-container'>
        <el-row :gutter="10">
            <el-col :span="16">
                <el-form ref="formRef" :model="form" label-width="auto">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="昵称" prop="nickName">
                                <el-input clearable v-model="form.nickName" placeholder="输入昵称"
                                    size="default"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="账号" prop="username">
                                <el-input clearable v-model="form.username" placeholder="输入账号"
                                    size="default"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="primary" @click="getUserList" plain>查询</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button @click="reset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="1" :offset="7">
                <el-button :icon="Back" circle @click="$router.back()" />
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="table" stripe style="width: 100%" ref="tableRef"
            :header-cell-style="{ background: `#f5f7fa` }">
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="nickName" label="昵称" />
            <el-table-column prop="headPic" label="头像" />
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button text size="small" type="primary" @click="handleAdd(row)">添加</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row justify="end" class="mt-20px">
            <el-pagination v-model:current-page="form.page" v-model:page-size="form.pageSize"
                :page-sizes="[10, 15, 20, 25]" :background="true" size="default"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getUserList"
                @current-change="getUserList" />
        </el-row>

        <el-dialog v-model="addVisible" title="添加" width="500" @close="handleClose">
            <el-form :model="addForm" label-width="auto">
                <el-form-item label="验证信息">
                    <el-input :autosize="{ minRows: 2 }" show-word-limit :maxlength="150" type="textarea" clearable
                        v-model="addForm.reason" placeholder="输入验证信息" size="default"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="submit" type="primary">发送</el-button>
                    <el-button @click="addVisible = false"> 取消 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped></style>